<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      子向父传递数据
      1.子组件写send事件sub(){this.$emit("send", this.msg)}
      2.子组件标签使用 @click="sub"
      3.父组件的子组件标签里写@send="acceptMsg"
      4.父组件methods方法里写 acceptMsg(msg) {this.msg = msg;},
     -->
    <div id="app">
      <my-father></my-father>
    </div>
    <!-- 父组件 -->
    <template id="father">
      <div>
        <h2>父组件--{{msg}}</h2>
        <my-son @send="acceptMsg"></my-son>
      </div>
    </template>
    <!-- 子组件 -->
    <template id="son">
      <div>
        <h5>子组件--{{msg}}</h5>
        <button @click="sub">传递</button>
      </div>
    </template>
    <script src="../vue.js"></script>
    <script>
      const Son = {
        template: "#son",
        data() {
          return {
            // 子组件标签使用事件
            msg: "子组件内容",
          };
        },
        methods: {
          sub() {
            // this.$emit发送事件，
            this.$emit("send", this.msg);
          },
        },
      };
      // 父组件
      const Father = {
        template: "#father",
        components: {
          "my-son": Son,
        },
        data() {
          return {
            msg: "",
          };
        },
        methods: {
          // 父元素接收
          acceptMsg(msg) {
            this.msg = msg;
          },
        },
      };
      new Vue({
        el: "#app",
        components: {
          "my-father": Father,
        },
      });
    </script>
  </body>
</html>
